import styled from "styled-components";

import Grid from "@mui/material/Grid";
import PadButton from "components/PadButton";
import { useEffect, useState } from "react";
import InputFiled from "./InputField";
import { connect } from "react-redux";
import { setAmount, editLabel } from "../../redux/action";
import handlePad from "./handlePad";
import dayjs from 'dayjs';
import { addRecord,selectTag,selectCategory } from "../../redux/action";
import uniqueId from "./id_creator";
const NotePad = (props: any) => {
  const [btnValue, setBtnValue] = useState("0");
  const setAmount = props.setAmount;
  const editLabel = props.editLabel;
  const addRecord = props.addRecord;
  const note = props.note;
  const selectTag = props.selectTag;
  const selectCategory = props.selectCategory;
  // useEffect(() => {
  //   return () => {
  //     selectCategory("0")
  //   }
  // })
  const setButtonContent = (content: string) => {
    if (btnValue.length > 15) {
      setBtnValue(btnValue.slice(0, 15));
    }
    // setBtnValue(content);
    switch (content) {
      case "0":
        if (btnValue === '0') {
          setBtnValue('0')
          break
        } else {
          setBtnValue(btnValue + '0')
          break;
        }
      case "1":
      case "2":
      case "3":
      case "4":
      case "5":
      case "6":
      case "7":
      case "8":
      case "9":
        if (btnValue === "0") {
          setBtnValue(content);
        } else {
          setBtnValue(btnValue + content);
        }
        break;
      case ".":
        //1.2+3.8
        //1.23.1+3.0
        //1.3.4.4
        if (btnValue.indexOf(".") > 0) {
          setBtnValue(btnValue);
          break;
        }
        //0.2
        const lastOne = btnValue[btnValue.length - 1];
        if (["+", "-", "."].indexOf(lastOne) < 0) {
          setBtnValue(btnValue + ".");
          break;
        } else {
          setBtnValue(btnValue);
          break;
        }
        break;
      case "删除":
        if (btnValue.length > 1) {
          setBtnValue(btnValue.slice(0, -1));
        } else {
          setBtnValue("0");
        }

        break;
      case "+":
      case "-":
        const last = btnValue[btnValue.length - 1];
        if (btnValue !== "0" && ["+", "-", "."].indexOf(last) < 0) {
          setBtnValue((btnValue + content).toString());
          break;
        } else {
          setBtnValue(btnValue);
        }
        break;
      case "清空":
        setBtnValue("0");
        break;
      case "完成":
        const result = handlePad(btnValue);
        setBtnValue(result)      
        const dateISO=dayjs().format()
        const unid = uniqueId()();
         console.log(note);
         
        
        if (parseFloat(result) !== 0 && note.selectedTag.length!==0) {
          addRecord(unid, note.selectedTag, dateISO, parseFloat(result), note.category, note.note)
          setAmount(0)
          editLabel("")
          selectTag([])
          break;
        }
       
        break;
      default:
        break;
    }
  };
  const TabSpacer = () => {
    const TabSpacerWrapper = styled.div`
      width: auto;
      height: 60px;
    `;
    return <TabSpacerWrapper />;
  };
  return (
    <div>
      <InputFiled btnContent={btnValue} />
      <Grid container>
        <Grid item xs={2.9}>
          <PadButton setButtonContent={setButtonContent}>1</PadButton>
        </Grid>
        <Grid item xs={2.9}>
          <PadButton setButtonContent={setButtonContent}>2</PadButton>
        </Grid>
        <Grid item xs={2.9}>
          <PadButton setButtonContent={setButtonContent}>3</PadButton>
        </Grid>
        <Grid item xs={3.2}>
          <PadButton setButtonContent={setButtonContent}>删除</PadButton>
        </Grid>
        <Grid item xs={0.1}>
          <TabSpacer />
        </Grid>

        <Grid item xs={2.9}>
          <PadButton setButtonContent={setButtonContent}>4</PadButton>
        </Grid>
        <Grid item xs={2.9}>
          <PadButton setButtonContent={setButtonContent}>5</PadButton>
        </Grid>
        <Grid item xs={2.9}>
          <PadButton setButtonContent={setButtonContent}>6</PadButton>
        </Grid>
        <Grid item xs={3.2}>
          <PadButton setButtonContent={setButtonContent}>-</PadButton>
        </Grid>
        <Grid item xs={0.1}>
          <TabSpacer />
        </Grid>
        <Grid item xs={2.9}>
          <PadButton setButtonContent={setButtonContent}>7</PadButton>
        </Grid>
        <Grid item xs={2.9}>
          <PadButton setButtonContent={setButtonContent}>8</PadButton>
        </Grid>
        <Grid item xs={2.9}>
          <PadButton setButtonContent={setButtonContent}>9</PadButton>
        </Grid>
        <Grid item xs={3.2}>
          <PadButton setButtonContent={setButtonContent}>+</PadButton>
        </Grid>

        <Grid item xs={0.1}>
          <TabSpacer />
        </Grid>
        <Grid item xs={3.0}>
          <PadButton setButtonContent={setButtonContent}>0</PadButton>
        </Grid>
        <Grid item xs={3.0}>
          <PadButton setButtonContent={setButtonContent}>.</PadButton>
        </Grid>
        <Grid item xs={2.9}>
          <PadButton setButtonContent={setButtonContent}>清空</PadButton>
        </Grid>
        <Grid item xs={3.0}>
          <PadButton setButtonContent={setButtonContent}>完成</PadButton>
        </Grid>
        <Grid item xs={0.1}>
          <TabSpacer />
        </Grid>
      </Grid>
    </div>
  );
};
const mapStateToProps = (state: any) => {
  return { amount: state.note.amount ,note: state.note};
};
export default connect(mapStateToProps, { setAmount, editLabel ,addRecord,selectTag,selectCategory})(NotePad);
